<template>
    <div style="width: 100%; height: 100%;" id="service_request_con"></div>
</template>

<script>
import * as echarts from 'echarts';
const options = {
    title: {
        text: ''
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['售票额', '服务费', '售票数', '客单价']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: []
    },
    yAxis: {
        type: 'value'
    },
    series: []
};
export default {
    name: 'serviceRequests',
    props: {
        datas: {
            type: Array,
            default: function() {
                return [];
            }
        }
    },
    data() {
        return {
            chart: null
        }
    },
    watch: {
        datas: {
            deep: true,
            handler() {
                this.init();
            }
        }
    },
    mounted () {
        this.chart = echarts.init(document.getElementById('service_request_con'));
        this.init();
        window.addEventListener('resize', () => {
            this.chart.resize();
        });
    },
    methods: {
        init() {
            let xAxis = [];
            let series = [
                {
                    name: '售票额',
                    type: 'line',
                    stack: '总量',
                    data: []
                },
                {
                    name: '服务费',
                    type: 'line',
                    stack: '总量',
                    data: []
                },
                {
                    name: '售票数',
                    type: 'line',
                    stack: '总量',
                    data: []
                },
                {
                    name: '客单价',
                    type: 'line',
                    stack: '总量',
                    data: []
                }
            ];
            
            this.datas.forEach(item => {
                xAxis.push(item.date);
                series[0]['data'].push(item.amount);
                series[1]['data'].push(item.platform_fee);
                series[2]['data'].push(item.nums);
                series[3]['data'].push(item.avg_price);
            })
            
            options.xAxis.data = xAxis;
            options.series = series;
            
            this.chart.setOption(options);
        }
    }
};
</script>